<template>
  <div class="box-list-container">
    <div class="box-query-form">
      <el-form :model="queryParam" label-width="auto" label-position="right" :gutter="24">
        <el-row>
          <el-col :span="24">
            <el-form-item label="任务进度:">
              <div class="dispalyFlex">
                <el-button type="success" size="small" @click="stateCheckAll">全选</el-button>
                <el-button type="info" size="small" style="margin-right: 10px;" @click="stateCheckOutAll">全不选</el-button>
                <el-checkbox-group v-model="queryParam.scheduleInfo" size="small">
                  <el-checkbox-button v-for="item in scheduleInfoList" :key="item.code" :label="item.code">{{ item.name }}</el-checkbox-button>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8" :md="12" :sm="24">
            <el-form-item label="关键词:">
              <el-input v-model="queryParam.keyword" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8" :md="12" :sm="24">
            <el-form-item label="主表ID:">
              <el-input v-model="queryParam.fid" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xl="10" :lg="10" :md="12" :sm="24">
            <el-form-item label="开始时间:">
              <el-date-picker
                v-model="queryParam.timeTemp1"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                @change="getTimeScope1"
              />
            </el-form-item>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="24" class="table-search-btn">
            <el-button icon="el-icon-refresh" @click="searchReset">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="searchQuery">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="box-table">
      <div class="table-title">
        <div class="table-title-left">
          子表备份列表
        </div>
        <div>
          <el-button type="warning" icon="el-icon-document-copy" @click="backup">一键备份</el-button>
          <el-button type="warning" icon="el-icon-delete-solid" style="margin-right: 10px;" @click="clearSubtable">清空子表数据</el-button>
        </div>
      </div>
      <!-- 批量操作 -->
      <div v-if="selectedRowList.length" class="batchAction">
        <div class="batchAction-left">
          <el-dropdown>
            <el-button>
              批量操作 <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div @click="batchDelete"><i class="el-icon-delete" />删除</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="batchAction-right">
          已选择
          <span style="font-weight: 700">
            <el-link type="primary" :underline="false">{{ selectedRowList.length }}</el-link>
          </span>项
          <el-link type="primary" :underline="false" style="margin-left: 24px;" @click="onClearSelected">清空</el-link>
        </div>
      </div>
      <el-table ref="table" :data="dataSource" @selection-change="onSelectChange">
        <el-table-column type="selection" width="55" />
        <el-table-column fixed="left" prop="id" label="ID" width="60" />
        <el-table-column fixed="left" prop="backupsTime" label="备份时间" width="150" />
        <el-table-column prop="fid" label="主表id" width="70" />
        <el-table-column prop="productName" label="主表产品名称" width="150" />
        <el-table-column prop="keyword" label="关键词" min-width="200" />
        <el-table-column prop="schedule" label="进度" width="100" />
        <el-table-column prop="upperLimit" label="上限" width="100" />
        <el-table-column prop="startTime" label="开始时间" width="150" />
        <el-table-column prop="endTime" label="结束时间" width="150" />
        <el-table-column prop="remark1" label="备注1" min-width="100" />
        <el-table-column prop="remark2" label="备注2" min-width="100" />
        <el-table-column prop="remark3" label="备注3" min-width="100" />
        <el-table-column prop="remark4" label="备注4" min-width="100" />
        <el-table-column prop="updateTime" label="更新时间" width="150" />
        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <!-- <el-button type="text" @click="handleEdit('编辑', scope.row)">编辑</el-button> -->
            <el-popconfirm title="确定删除吗？" style="margin-left: 10px" @confirm="handleDelete(scope.row[guidFieldName])">
              <el-button slot="reference" type="text" style="color: red;">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="box-paging">
        <Pagination
          v-show="ipagination.total > 0"
          layout="total, sizes, prev, pager, next"
          :total="ipagination.total"
          :page.sync="ipagination.pageNum"
          :limit.sync="ipagination.pageSize"
          @pagination="loadData"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { listMixin } from '@/mixins/listMixin'
import Pagination from '@/components/Pagination'
import { postAction } from '@/api/manage'

export default {
  components: {
    Pagination
  },
  mixins: [listMixin],
  data() {
    return {
      guidFieldName: 'id',
      ipagination: {
        pageNum: 1,
        pageSize: 100,
        total: 0
      },
      queryParam: {
        scheduleInfo: []
      },
      scheduleInfoList: [
        { name: '未开始', code: '未开始' },
        { name: '未完成', code: '未完成' },
        { name: '已完成', code: '已完成' }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      toggleSearchStatus: false,
      userInfo: this.$ls.get('USER_INFO') || {},
      url: {
        list: 'subTableBackups.aspx?action=GetList',
        delete: 'subTableBackups.aspx?action=Delete',
        deleteBatch: 'subTableBackups.aspx?action=DeleteBatch'
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 清空子表数据
    clearSubtable() {
      this.$confirm('确定清空子表数据吗?  请确保清空前已经备份，否则数据无法找回！！！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('app/setLoading', true)
        postAction('subTable.aspx?action=clearSubtable', {}).then((res) => {
          if (res.code === 1) {
            this.loadData(1)
            this.$message.success(res.message || '操作成功！')
          } else {
            this.$message.warning(res.message || '操作失败！')
          }
        }).finally(() => {
          this.$store.dispatch('app/setLoading', false)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消清空'
        })
      })
    },
    // 备份
    backup() {
      this.$confirm('确定备份吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('app/setLoading', true)
        postAction('subTableBackups.aspx?action=onekeyBackups', {}).then((res) => {
          if (res.code === 1) {
            this.loadData(1)
            this.$message.success(res.message || '操作成功！')
          } else {
            this.$message.warning(res.message || '操作失败！')
          }
        }).finally(() => {
          this.$store.dispatch('app/setLoading', false)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消备份'
        })
      })
    },
    // 备份时间
    getTimeScope1(e) {
      if (e) {
        this.queryParam.bftime1 = this.$moment(e[0]).format('YYYY-MM-DD HH:mm:ss')
        this.queryParam.bftime2 = this.$moment(e[1]).format('YYYY-MM-DD HH:mm:ss')
      } else {
        this.queryParam.bftime1 = ''
        this.queryParam.bftime2 = ''
      }
    },
    // 重置
    searchReset() {
      this.queryParam = {
        scheduleInfo: []
      }
      this.loadData(1)
    },
    // 全选
    stateCheckAll() {
      this.queryParam.scheduleInfo = this.scheduleInfoList.map(v => v.code)
    },
    // 全不选
    stateCheckOutAll() {
      this.queryParam.scheduleInfo = []
    }
  }
}
</script>

<style lang="scss" scoped>
.dispalyFlex{
  display: flex;
  align-items: center;
}
</style>

